<template>
  <div class="list">
    <cu-header :height="80" />
    <div class="list-container container">
      <div class="sec-filter">
        <div class="filter-title mt20">{{ $t('list.5') }}</div>
                <div class="goods-list ">
          <div class="godds-item flex" v-for="item in list" :key="item.id">
            <div class="flex-none" style="margin-right:20px">
              <div class="jingxuan">
                  <img @click="handleDetail(item)" style="cursor: pointer;" class="goods-img" :src="item.showImg" alt="" />
                  <div class="recommend-item-title mv10">
                    <span class="recommend-tag" v-if="item.tag === '1' || item.tag === '3' ">{{ $t('component.sendList.6') }}</span>
                  </div>
                </div>

            </div>
            <div class="flex-auto width0">
              <div class="goods-info flex flex-column flex-justify-content-between">
                <el-row>
                  <el-col :span="20">
                    <div @click="handleDetail(item)" class="goods-name">{{ item.name }}</div>
                  </el-col>
                  <el-col :span="4" class="text-right">
                    <div class="goods-price">{{ item.price | num2Money }} KZ</div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="20">
                    <div class="goods-desc" v-html="item.des"></div>
                  </el-col>
                  <el-col :span="4"> </el-col>
                </el-row>
                <el-row type="flex" align="middle">
                  <el-col :span="20">
                    <div class="goods-user">
                      <!-- <label class="flex flex-align-items-center">
                        <img class="goods-user-head" :src="domain + item.portrait" alt="" />
                        <span class="ml10">{{ item.creatorNick }}</span>
                      </label> -->
                      <label >
                        <i class="el-icon-location-outline" style="font-size: 18px"></i>
                        <span class="ml5">{{ item.areaName }}</span>
                      </label>
                      <label class="ml40">
                        <i class="el-icon-time" style="font-size: 18px"></i>
                        <span class="ml5">{{ item.createTime }}</span>
                      </label>
                    </div>
                  </el-col>
                  <el-col class="text-right" :span="4">
                    <!--                    <i class="fa fa-heart" style="color: #fb8c24" @click="handleFavorites()" v-if="isFavorites"></i>-->
                    <i class="fa fa-heart-o" style="color: #fb8c24; cursor: pointer;margin-right:15px" @click="handleFavorites(item)"></i>
<!--                    <ShareNetwork-->
<!--                      network="facebook"-->
<!--                      :url="sharing.url"-->
<!--                      :title="sharing.title"-->
<!--                      :description="sharing.description"-->
<!--                      :quote="sharing.quote"-->
<!--                      :hashtags="sharing.hashtags"-->
<!--                      :twitterUser="sharing.twitterUser"-->
<!--                      @open = open(item)-->
<!--                  >-->
<!--                   <i class="fa fa-share-alt" style="color: #fb8c24;cursor: pointer;"></i>-->
<!--                  </ShareNetwork>-->
                    <i class="fa fa-share-alt" @click="shareFacebook(item)" style="color: #fb8c24;cursor: pointer;"></i>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <div class="text-center">
          <el-pagination :page-size="params.pageSize" :pager-count="11" layout="prev, pager, next" :total="total" @current-change="handleCurrent" @pre-click="handlePre" @next-click="handleNext"> </el-pagination>
        </div>
      </div>
    </div>
    <cu-footer />
  </div>
</template>
<script>
import CuHeader from '@/components/header';
import CuFooter from '@/components/footer';
import Api from '@/api';
import { Domain } from '@/constants';
import { isLogin } from '@/utils';
import {facebookShare} from '@/utils/facebook';
export default {
  name: 'List',
  components: { CuHeader, CuFooter },
  data() {
    return {
      domain: Domain,
      params: {
        username: '',
        pageSize: 40,
        pageNo: 1
      },
      total: 0,
      paramsList: [],
      list: [],
      multiOptions: [],
      typeList: [],
      searchParams: [],
      sharing: {
        url: 'https://news.vuejs.org/issues/180',
        title: 'Say hi to Vite! A brand new, extremely fast development setup for Vue.',
        description: 'This week, I’d like to introduce you to "Vite", which means "Fast". It’s a brand new development setup created by Evan You.',
        quote: 'The hot reload is so fast it\'s near instant. - Evan You',
        hashtags: 'vivebo',
        twitterUser: 'youyuxi'
      },
    };
  },
  created() {
    const username = this.$route.params.username
    if (username){
      this.params.username = username
      this.loadData();
    }else {
      this.total = 0;
      this.list = [];
    }
  },
  methods: {
    paramsChange(val) {
      this.searchParams = [];
      this.paramsList.forEach((item) => {
        if (item.typeParam.value) {
          this.searchParams.push(item);
        }
      });
      this.loadData();
    },
    loadData() {
      Api.goodsList(this.params).then((res) => {
        this.total = res.total;
        this.list = res.rows.map((item) => {
          const img = item.imgList ? JSON.parse(item.imgList)[0] : '';
          return Object.assign(item, { showImg: Domain + img });
        });
        console.log(this.list);
      });
    },
    handleMultiChange(value) {
      this.params.area = value.join(',');
      this.params.pageNo = 1;
      this.loadData();
    },
    handleMultiTypeChange(value) {
      this.params.type = value.join(',');
      this.params.pageNo = 1;
      this.loadData();
    },
    handleKeywords() {
      this.params.pageNo = 1;
      this.loadData();
    },
    loadTree() {
      Api.areaTree().then((res) => {
        this.multiOptions = res;
      });
    },
    loadType() {
      Api.goodsTypeList().then((res) => {
        this.typeList = res;
      });
    },
    handleDetail(item) {
      this.$router.push({
        path: '/detail',
        query: {
          id: item.id,
        },
      });
    },
    handleCurrent(page) {
      this.params.pageNo = page;
      this.loadData();
    },
    handlePre(page) {
      this.params.pageNo = page;
      this.loadData();
    },
    handleNext(page) {
      this.params.pageNo = page;
      this.loadData();
    },
    handleFavorites(val) {
      if (!isLogin()) {
        this.$login.show();
      } else {
        const params = {
          commodityId: val.id,
        };
        Api.addFavorites(params).then(() => {
          this.loadFavoritesStatus();
        });
      }
    },
    handleShare(item) {
      console.log(item)
      if (!isLogin()) {
        this.$login.show();
      }
      facebookShare("www.vivebo.com").then((res)=>{
        console.log(res)
      })

    },
    shareFacebook(item) {
      window.FB.ui({
        method: 'share',
        href: `https://www.vivebo.com/vivebo/share/new/`+item.id
      }, function(response){
        //分享回调，可留空
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.list {
  background: #f2f2f2;
}
.list-container {
  padding: 50px;
  box-sizing: border-box;
}
.filter-title {
  color: #333;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 12px;
}

/* list */
.goods-list {
  border-top: 3px solid #fff;
  padding-top: 30px;
  overflow: auto;
  .jingxuan{
      position: relative;
      width: 180px;
      height: 170px;
      overflow: hidden;
      border-radius: 4px;
      img {
       width: 100%;
        height: 170px;
        object-fit: cover;
      }
      .recommend-tag {
        color: #fff;
        font-size: 12px;
        background: linear-gradient(235deg, #ff7144 0%, #f63e2d 100%);
        display: inline-block;
        padding: 5px 10px;
        border-radius: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
}
.godds-item {
  background-color: #fff;
  border-radius: 4px;
  padding: 16px 24px;
  margin-bottom: 12px;
}
.goods-img {
  width: 100%;
  // height: 180px;
  display: inline-block;
  margin-right: 24px;
  object-fit: cover
}
.goods-info {
  width: 100%;
  height: 180px;
}
.goods-name {
  color: #595959;
  font-size: 20px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.goods-price {
  color: #333;
  font-weight: bold;
  font-size: 18px;
}
.goods-desc {
  color: #999999;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.goods-user {
  font-size: 14px;
  color: #999999;
  display: flex;
  align-items: center;
}
.goods-user-head {
  width: 24px;
  height: 24px;
  background: #f2f2f2;
  border-radius: 50%;
  display: inline-block;
}
</style>
